<template>
  <view class="page-wrap">
    <!-- Header -->
    <c-nav-bar title="特殊体质" type="white" />

    <!-- Form Content -->
    <view class="mt-4 px-4 pb-20">
      <view class="rounded-lg bg-white p-6">
        <view class="mb-6 text-center">
          <text class="text-lg font-medium">
            特殊体质调查表
          </text>
          <text class="mt-2 block text-base">
            回执
          </text>
        </view>

        <!-- Description -->
        <view class="mb-6 text-sm text-gray-800">
          贵校下发的《特殊体质学生调查表》中的内容我已仔细阅读，所填信息为本人亲自填写，保证真实有效。
        </view>

        <!-- Confidential Information -->
        <view class="mb-6">
          <view class="mb-2 text-sm text-gray-800">
            需要学校予以保密的信息有:
          </view>
          <u-textarea
            v-model="form.confidentialInfo"
            placeholder="请输入需要保密的内容"
            height="120"
            count
            maxlength="500"
          />
        </view>

        <!-- Agreement -->
        <view class="mb-8">
          <up-checkbox-group
            v-model="form.agreement"
          >
            <u-checkbox
              shape="circle"
              active-color="#8b1c1c"
            >
              <template #label>
                <text class="text-sm text-gray-600">
                  我是学生家长，我已认真阅读并如实填写以上所有信息，如信息不真实导致的后果，由家长和学生自行承担。
                  <text class="mt-1 block">
                    (如没有需要保密的信息，则填写"无"。)
                  </text>
                </text>
              </template>
            </u-checkbox>
          </up-checkbox-group>
        </view>

        <!-- Submit Button -->
        <u-button
          text="提交"
          type="primary"
          :disabled="!form.agreement.length"
          class="w-full"
          shape="circle"
          @click="handleSubmit"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  confidentialInfo: '',
  agreement: [],
});

const handleSubmit = () => {
  if (!form.agreement.length) {
    uni.showToast({
      title: '请先同意声明',
      icon: 'none',
    });
    return;
  }

  if (!form.confidentialInfo) {
    uni.showToast({
      title: '请填写保密信息，如无请填写"无"',
      icon: 'none',
    });
    return;
  }

  uni.showLoading({
    title: '提交中...',
  });

  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '提交成功',
      icon: 'success',
    });

    // Navigate to success page
    uni.navigateTo({
      url: '/pages/biz/special/success',
    });
  }, 1000);
};
</script>

<style scoped>
:deep(.u-textarea) {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
}

:deep(.u-checkbox) {
  align-items: baseline;
}

:deep(.u-button--error--disabled) {
  background: #8b1c1c;
  opacity: 0.5;
}

:deep(.u-checkbox__icon-wrap) {
  flex-shrink: 0;
}
</style>
